<!--  -->
<template>
    <div id="container">
        <div ref="chart" id="main"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    components: {},
    data() {
        return {
            chart: null
        }
    },
    props: {
        chartData: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        chartData: {
            handler(newVal) {
                if (newVal && this.chart) {
                    this.drawChart()
                }
            },
            immediate: true,
            deep: true
        }
    },
    computed: {},
    created() {
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.chart);
        if (this.chart) {
            this.chart.dispose();
        }
    },
    mounted() {
        if (!this.chart) {
            this.chart = echarts.init(this.$refs.chart)
            window.addEventListener('resize', this.handleResize);
        }
    },
    methods: {
        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
        drawChart() {
            var myChart = this.chart
            // const chartData = [
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 1,
            //         "z": 91.5,
            //         "q": 400,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 2,
            //         "z": 91.6,
            //         "q": 460,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 3,
            //         "z": 92,
            //         "q": 620,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 4,
            //         "z": 92.4,
            //         "q": 820,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 5,
            //         "z": 92.8,
            //         "q": 1120,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 6,
            //         "z": 93.2,
            //         "q": 1420,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 7,
            //         "z": 93.6,
            //         "q": 1750,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 8,
            //         "z": 94,
            //         "q": 2070,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 9,
            //         "z": 94.4,
            //         "q": 2420,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 10,
            //         "z": 94.8,
            //         "q": 2810,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 11,
            //         "z": 95.2,
            //         "q": 3290,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 12,
            //         "z": 95.6,
            //         "q": 3720,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 13,
            //         "z": 96,
            //         "q": 4200,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 14,
            //         "z": 96.4,
            //         "q": 4720,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 15,
            //         "z": 96.8,
            //         "q": 5210,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 16,
            //         "z": 97.2,
            //         "q": 5800,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 17,
            //         "z": 97.6,
            //         "q": 6380,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 18,
            //         "z": 98,
            //         "q": 7020,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 19,
            //         "z": 98.4,
            //         "q": 7560,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 20,
            //         "z": 98.8,
            //         "q": 8180,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 21,
            //         "z": 99.2,
            //         "q": 8660,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 22,
            //         "z": 99.6,
            //         "q": 9380,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 23,
            //         "z": 100,
            //         "q": 10080,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 24,
            //         "z": 100.4,
            //         "q": 10800,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 25,
            //         "z": 100.8,
            //         "q": 11400,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 26,
            //         "z": 101.2,
            //         "q": 12100,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 27,
            //         "z": 101.6,
            //         "q": 12800,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 28,
            //         "z": 102,
            //         "q": 13600,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 29,
            //         "z": 102.4,
            //         "q": 14500,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 30,
            //         "z": 102.8,
            //         "q": 15400,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 31,
            //         "z": 103.2,
            //         "q": 16200,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 32,
            //         "z": 103.6,
            //         "q": 17100,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 33,
            //         "z": 104,
            //         "q": 18000,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 34,
            //         "z": 104.4,
            //         "q": 18900,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     },
            //     {
            //         "stcd": "10100100",
            //         "lnnm": "2010年启用的综合曲线          ",
            //         "bgtm": "2010-01-01 00:00",
            //         "ptno": 35,
            //         "z": 105,
            //         "q": 21000,
            //         "comments": null,
            //         "moditime": "2013-08-13 13:29"
            //     }
            // ]
            const chartData = this.chartData
            const zq_data = chartData.map(item => [item.z, item.q])
            const qyMin = Math.floor(Math.min(...chartData.map(item => item.q)))
            const qyMax = Math.ceil(Math.max(...chartData.map(item => item.q)))

            var option = {
                title: {
                    text: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        const param = params[0];
                        return `
                        <div style="text-align: left">
                            <p>水位：${param.value[0]} m</p>
                            <p>流量：${param.value[1]} m³/s</p>
                        </div>
                    `;
                    },
                    // 直接设置宽度和高度
                    width: 140,
                    height: 80,
                    // 或者通过 padding 调整
                    padding: [0, 10],
                    // 调整文本样式
                    textStyle: {
                        fontSize: 12,
                        lineHeight: 14
                    }

                },
                legend: {
                    // 开启图例
                    show: false,
                },
                grid: {
                    top: '4%',
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: '水位(m)',
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            color: '#B2B8C3'
                        },
                        axisLine: {
                            onZero: true,
                            lineStyle: {
                                color: '#B2B8C3'
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        name: '流量(m³/s)',
                        type: 'value',
                        axisLabel: {
                            color: '#B2B8C3'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#B2B8C3'
                            }
                        },
                        axisTick: {
                            show: false // 隐藏刻度线
                        },
                        splitLine: {  // y轴网格线
                            show: true,
                            lineStyle: {
                                type: 'dashed',    // 虚线类型
                                color: '#666666',  // 线条颜色
                                width: 0.5,          // 线条宽度
                                dashOffset: 2      // 虚线偏移量
                            }
                        },
                        axisLabel: {
                            show: true,
                            // textStyle: {
                            //   color: '#fff'
                            // },
                            margin: 13  // 减小标签与轴的距离
                        },
                        min: qyMin,
                        max: qyMax
                    },
                ],
                series: [
                    {
                        name: '水位流量关系',
                        type: 'line',
                        smooth: true, // 关键属性：设为 true 开启平滑曲线
                        data: zq_data
                    }
                ]
            };

            myChart.setOption(option);

        },


    },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式
#container {
    position: relative;
    /* 添加相对定位 */
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#main {
    width: 100%;
    height: 100%;
}
</style>